<template>
  <div class="hive">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="180px" class="demo-ruleForm">
    <el-form-item label="数据源名称" prop="name">
        <el-input v-model="ruleForm.name" @input="changeName"></el-input>
    </el-form-item>
    <el-form-item label="链接模式" prop="model">
        <el-select v-model="ruleForm.model" placeholder="请选择">
          <el-option
            label="hiveserver2"
            value="hiveserver2">
          </el-option>
          <el-option
            label="zookeeper"
            value="zookeeper">
          </el-option>
        </el-select>
    </el-form-item>
    <el-form-item label="服务器" prop="server">
        <el-input v-model="ruleForm.server"></el-input>
    </el-form-item>
    <el-form-item label="端口" prop="port" v-if="ruleForm.model=='hiveserver2'">
        <el-input v-model="ruleForm.port"></el-input>
    </el-form-item>
    <el-form-item label="命名空间" prop="namespace" v-if="ruleForm.model=='zookeeper'">
        <el-input v-model="ruleForm.namespace"></el-input>
    </el-form-item>
    <el-form-item label="认证方式" prop="methods">
        <el-select v-model="ruleForm.methods" placeholder="请选择">
          <el-option
            label="无"
            value="0">
          </el-option>
          <el-option
            label="kerberos"
            value="kerberos">
          </el-option>
          <el-option
            label="用户名密码"
            value="userword">
          </el-option>
        </el-select>
    </el-form-item>
    <el-form-item label="服务器principal" prop="serverpri" v-if="ruleForm.methods=='kerberos'">
        <el-input v-model="ruleForm.serverpri"></el-input>
    </el-form-item>
    <el-form-item label="客户端principal" prop="clientpri" v-if="ruleForm.methods=='kerberos'">
        <el-input v-model="ruleForm.clientpri"></el-input>
    </el-form-item>
    <el-form-item label="keytap文件" prop="file" v-if="ruleForm.methods=='kerberos'">
       <el-upload
        class="upload-demo"
        ref="upload"
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :file-list="fileList"
        :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
        <div slot="tip" class="el-upload__tip">只能上传keytap文件</div>
      </el-upload>
    </el-form-item>
    <el-form-item label="用户名" prop="username" v-if="ruleForm.methods=='userword'">
        <el-input v-model="ruleForm.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password" v-if="ruleForm.methods=='userword'">
        <el-input v-model="ruleForm.password"></el-input>
    </el-form-item>
    <el-form-item label="初始化SQL" prop="sql">
        <el-input type="textarea" v-model="ruleForm.sql"></el-input>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">连接</el-button>
    </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'hive',
  //  props: {
  //     childname: {
  //         type: Object,
  //         default: {}
  //     }
  // },
   data () {
    return {
      childname:{},
        fileList:[],
        rules: {
        name: [
            { required: true, message: '请输入数据源名称', trigger: 'blur' },
            
          ],
          model: [
            { required: true, message: '请选择链接模式', trigger: 'blur' },
            
          ],
          server: [
            { required: true, message: '请输入服务器', trigger: 'blur' },
            
          ],
          port: [
            { required: true, message: '请输入端口', trigger: 'blur' },
            
          ],
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            
          ],
          sid: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            
          ],
      },
      ruleForm:{
        name:"",
        server:'',
        port:'',
        model:'hiveserver2',
        username:'',
        serverpri:"",
        clientpri:"",
        file:'',
        password:'',
        methods:"无",
        namespace:'',
        sql:''
      },
    }
  },
   watch: {
            childname: function(newVal,oldVal){
                this.cData = newVal;  //newVal即是chartData
                
            }
        },
  mounted(){
    this.initData();
  },
  methods:{
    initData(){
      this.childname=this.$store.state.formType
      this.ruleForm.name=this.childname.conName
      this.ruleForm.server=this.childname.conHost
      this.ruleForm.port=this.childname.conPost
      this.ruleForm.model=this.childname.conModelHive
      this.ruleForm.username=this.childname.conAccount
      this.ruleForm.serverpri=this.childname.conName
      this.ruleForm.clientpri=this.childname.conName
      this.ruleForm.password=this.childname.conPasswd
      this.ruleForm.namespace=this.childname.conName
      this.ruleForm.sql=this.childname.conInitSql
    },
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
            this.$emit('childevent',true);
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      submitUpload() {
        this.$refs.upload.submit();
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      changeName(e){
        console.log(e);
        this.$store.state.formType.name=e;
        this.$emit('childevent',e);
      }
  }
}
</script>

<style>
.Oracle{
    width: 60%;
}
</style>